<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">借教室</block>
		</cu-custom>
		<view class="wrap">
			<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item :leftIconStyle="{ color: '#888', fontSize: '32rpx' }" left-icon="account" label-width="200" :label-position="labelPosition" label="申请单位">
					<u-input :border="border" placeholder="请输入申请单位" v-model="model.orgName" type="text"></u-input>
				</u-form-item>
				<u-form-item :leftIconStyle="{ color: '#888', fontSize: '32rpx' }" left-icon="account" label-width="200" :label-position="labelPosition" label="负责人">
					<u-input :border="border" placeholder="请输入负责人" v-model="model.principalName" type="text"></u-input>
				</u-form-item>
				<u-form-item :leftIconStyle="{ color: '#888', fontSize: '32rpx' }" left-icon="phone" label-width="200" :label-position="labelPosition" label="联系电话">
					<u-input :border="border" placeholder="请输入联系电话" v-model="model.mobile" type="text"></u-input>
				</u-form-item>

				<u-form-item :leftIconStyle="{ color: '#888', fontSize: '32rpx' }" left-icon="calendar" label-width="200" :label-position="labelPosition" label="日期">
					<u-input :border="border" type="select" :select-open="actionSheetShow" v-model="model.time" placeholder="请选择日期" @click="actionSheetShow = true"></u-input>
				</u-form-item>

				<u-form-item :leftIconStyle="{ color: '#888', fontSize: '32rpx' }" left-icon="calendar" label-width="200" :label-position="labelPosition" label="借用时间">
					<u-input :border="border" type="text" v-model="model.timeDate" placeholder="请选择借用时间" @click="openTime"></u-input>
				</u-form-item>

				<u-form-item :leftIconStyle="{ color: '#888', fontSize: '32rpx' }" left-icon="server-man" label-width="200" :label-position="labelPosition" label="参与人数">
					<u-input :border="border" placeholder="请输入参与人数" v-model="model.num" type="number"></u-input>
				</u-form-item>

				<u-form-item :label-position="labelPosition" left-icon="map" label="借用地点" label-width="200">
					<u-radio-group v-model="model.floorId" @change="radioGroupChange" :width="radioCheckWidth" :wrap="radioCheckWrap">
						<u-radio shape="circle" v-for="(item, index) in radioList" :key="index" :name="item.id">{{ item.name }}</u-radio>
					</u-radio-group>
				</u-form-item>

				<u-form-item :leftIconStyle="{ color: '#888', fontSize: '32rpx' }" left-icon="file-text" label-width="200" :label-position="labelPosition" label="借用目的">
					<u-input type="textarea" :border="border" placeholder="请填写借用目的" v-model="model.remark" />
				</u-form-item>
			</u-form>

			<u-button @click="submit">提交</u-button>
			<u-picker mode="time" v-model="actionSheetShow" :params="params" @confirm="regionConfirm"></u-picker>

			<timeSlot ref="timeslot" :title="'选择时间段'" @confirm="confirmTime"></timeSlot>
		</view>
	</view>
</template>

<script>
import timeSlot from '@/components/wanghexu-timeslot/wanghexu-timeslot.vue';
import { getFloorList, postApply } from '@/api/main.js';
export default {
	components: {
		timeSlot
	},
	data() {
		let that = this;
		return {
			model: {
				remark: '',
				orgName: '',
				principalName: '',
				mobile: '',
				floorId: '',
				timeDate: '',
				startTime: '',
				endTime: '',
				time: ''
			},
			params: {
				year: true,
				month: true,
				day: true,
				hour: false,
				minute: false,
				second: false
			},
			border: false,
			rules: {
				name: [
					{
						required: true,
						message: '请输入姓名',
						trigger: 'blur'
					},
					{
						min: 3,
						max: 5,
						message: '姓名长度在3到5个字符',
						trigger: ['change', 'blur']
					},
					{
						// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
						validator: (rule, value, callback) => {
							// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
							return this.$u.test.chinese(value);
						},
						message: '姓名必须为中文',
						// 触发器可以同时用blur和change，二者之间用英文逗号隔开
						trigger: ['change', 'blur']
					}
				]
			},
			radioList: [],
			actionSheetShow: false,
			pickerShow: false,
			selectShow: false,
			radioCheckWidth: 'auto',
			radioCheckWrap: false,
			labelPosition: 'left',
			codeTips: '',
			errorType: ['message']
		};
	},
	onLoad() {},
	computed: {
		borderCurrent() {
			return this.border ? 0 : 1;
		}
	},
	onShow() {
		this.initData();
	},
	methods: {
		initData() {
			getFloorList().then(res => {
				console.log(res);
				this.radioList = res.data.result;
			});
		},
		openTime() {
			this.$refs.timeslot.open();
		},
		// 时间段数据
		confirmTime(e) {
			console.log(e);
			this.startTime = e.start.hour + '-' + e.start.min;
			this.endTime = e.end.hour + '-' + e.end.min;

			this.model.startTime = e.start.hour + ':' + e.start.min + ':00';
			this.model.endTime = e.end.hour + ':' + e.end.min + ':00';

			this.model.timeDate = this.startTime + '-' + this.endTime;

			console.log(this.model.timeDate);
		},
		submit() {
			let that = this
			// this.$refs.uForm.validate(valid => {
			// 	if (valid) {
			// 		if (!this.model.agreement) return this.$u.toast('请勾选协议');
			// 		console.log('验证通过');
			// 	} else {
			// 		console.log('验证失败');
			// 	}
			// });
			console.log(this.model);
			let data = this.model;
			
			postApply(data).then(res => {
				console.log(res);
				this.$u.toast('申请成功')
				that.$Router.back(1)

			});
		},
		// 选择地区回调
		regionConfirm(e) {
			this.model.time = e.year + '-' + e.month + '-' + e.day;
		},
		// 点击actionSheet回调
		actionSheetCallback(index) {
			uni.hideKeyboard();
			this.model.sex = this.actionSheetList[index].text;
		},
		borderChange(index) {
			this.border = !index;
		},
		labelPositionChange(index) {
			this.labelPosition = index == 0 ? 'left' : 'top';
		},
		errorChange(index) {
			if (index == 0) this.errorType = ['message'];
			if (index == 1) this.errorType = ['toast'];
			if (index == 2) this.errorType = ['border-bottom'];
			if (index == 3) this.errorType = ['border'];
		}
	}
};
</script>

<style scoped lang="scss">
.wrap {
	padding: 30rpx;
	background-color: #ffffff;
}

.agreement {
	display: flex;
	align-items: center;
	margin: 40rpx 0;

	.agreement-text {
		padding-left: 8rpx;
		color: $u-tips-color;
	}
}
</style>
